<template>
    <div class="filter">
        <div class="filter-item">
            <label for="">所属单位：</label>
            <el-select
                v-model="searchForm.depId"
                class="m-2"
                style="width: 125px"
                :disabled="localTypeUnit != '1'"
            >
                <el-option
                    v-for="item in depIdList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
        </div>
        <div class="filter-item">
            <label for="">领用日期：</label>
            <el-date-picker
                v-model="searchForm.dateTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                style="width: 225px"
            />
        </div>
        <div class="filter-item">
            <label for="">商品名称：</label>
            <el-input
                v-model="searchForm.productName"
                placeholder="请输入"
                style="width: 125px;"
            />
        </div>
        <div class="filter-item">
            <label for="">领用人：</label>
            <el-input
                v-model="searchForm.recipient"
                placeholder="请输入"
                style="width: 125px;"
            />
        </div>

        <div class="filter-item">
            <el-button
                size="default"
                type="primary"
                @click="search"
            >查询</el-button>
            <el-button
                size="default"
                @click="reset"
            >重置</el-button>
            <el-button
                size="default"
                @click="reset"
            >导出</el-button>
        </div>
    </div>
    <el-table
        :data="tableData"
        style="width: 100%"
        id="inspectionTask"
    >
        <!-- <el-table-column
            prop="depId"
            label="所属单位"
        >
            <template #default="scope">
                {{ depNameTranslate(scope.row.depId) }}
            </template>
        </el-table-column> -->
        <el-table-column
            prop="depName"
            label="所属单位"
        />
        <el-table-column
            prop="productCode"
            label="商品编号"
        />
        <el-table-column
            prop="productName"
            label="商品名称"
        />
        <el-table-column
            prop="categoryName"
            label="商品类别"
        />
        <el-table-column
            prop="specification"
            label="规格型号"
        />
        <el-table-column
            prop="unit"
            label="单位"
            width="90"
        />
        <el-table-column
            prop="quantity"
            label="领用数量"
            width="90"
        />
        <el-table-column
            prop="operatorName"
            label="领用人"
            width="90"
        />
        <el-table-column
            prop="useDate"
            label="领用日期"
        />
        <el-table-column
            prop="purpose"
            label="用途说明"
        />
    </el-table>
    <el-pagination
        v-model:current-page="searchForm.pageNo"
        v-model:page-size="searchForm.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        class="paginationStyle"
    />
</template>

<script setup>
// utils
import inventoryHttp from "@/https/inventory.js";
import Storage from "@/utils/storage.js";
import {
    Delete,
    Edit,
    View
} from "@element-plus/icons-vue";
import { ref, onMounted } from "vue";
import moment from 'moment';

let searchForm = ref({
    depId: Storage.localGet("depId"),
    dateTime: [moment().add(-7, 'day').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
    startTime: '',
    endTime: '',
    recipient: '',
    subType: '领用出库',
    operationType: '出库',
    pageNo: 1,
    pageSize: 10,
});
const localTypeUnit = ref(Storage.localGet("depId"));
// dict
const depIdList = ref([
    { label: "公司", value: "1" },
    { label: "星沙厂", value: "2" },
    { label: "城西厂", value: "3" },
    { label: "城北厂", value: "4" },
    { label: "城南厂", value: "5" },
    { label: "城东厂", value: "6" },
]);
const depNameTranslate = (depId) => {
    let depName = "";
    depIdList.value.forEach((item) => {
        if (item.value == depId) {
            depName = item.label;
        }
    });
    return depName;
};
let tableData = ref([]);
let total = ref(0);
const handleSizeChange = (val) => {
    searchForm.pageSize = val;
    search();
};
const handleCurrentChange = (val) => {
    searchForm.pageNo = val;
    search();
};
// 重置
const reset = async () => {
    searchForm.value.title = ''
    searchForm.value.taskCategory = 1
    search()
}
// 查询
const search = async () => {
    if (searchForm.value.dateTime && searchForm.value.dateTime.length == 2) {
        searchForm.value.startTime = moment(searchForm.value.dateTime[0]).format('YYYY-MM-DD')
        searchForm.value.endTime = moment(searchForm.value.dateTime[1]).format('YYYY-MM-DD')
    }
    const res = await inventoryHttp.queryOperationRecordList(searchForm.value)
    console.log(res.data.data, 'res')
    tableData.value = res.data.data.records ? res.data.data.records : []
    total.value = res.data.data.total
}
onMounted(() => {
    search()
})
</script>